;(function(global) {
  global.radio = {
    template: `
              <div>
                <div class="radio-container">
                  <!-- 综合题的样式  -->
                  <div v-if="examItemData.isComplex">
                    <div>
                      <div class="subject-type-name">{{ examItemData.partsTitle }}</div>
                    </div>
                    <div class="radio-dry" :class="{isShowDry:isShowDry}">{{ index+1 }}、<span v-html='examItemData.topic'></span>
                    </div>
                    <div class="radio-switch-container">
                      <div class="radio-switch" @click="showDry"></div>
                    </div>
                    <span v-if="examItemData.isComplex" class="redio-complex-dry-num">
                      第{{ examItemData.smallIndex+1 }}小题&nbsp;
                      {{ examItemData.describe }}
                    </span>
                    <div class="radio-complex-hr"></div>
                  </div>

                  <!-- 单选题的标题  -->
                  <div v-else class="radio-type-two">
                    <div class="subject-type-name">{{ examItemData.partsTitle }}</div>
                    <span class="title-num">{{ index+1 }}、</span><span class="title-desc" v-html="examItemData.describe"></span>
                  </div>

                  <!-- 每道题答案选项 -->
                  <div>
                    <van-radio-group v-model="radio" :disabled="radioDisabled">
                      <van-radio v-for="(val, key) in examItemData.options" :name="key" @click="choose(key)" :class="answeredStyle[key]" class="needsclick">
                        <div v-html="val"></div>
                        <div slot="icon" class="test">
                          <span class="subject-option">{{ key }}</span>
                        </div>
                      </van-radio>
                    </van-radio-group>
                  </div>
                </div>

                <!-- 答案解析 -->
                <div class="answer-analysis-container" v-show="isShowAnswerAnalysis">
                  <div class="answer-analysis-hr"></div>
                  <div class="answer-analysis-right-answer"><span class="answer-analysis-right-answer-span">正确答案</span>{{ answer }}</div>
                  <div class="answer-analysis">
                    <p class="answer-analysis-p">答案解析</p>
                    <div class="answer-analysis-content" v-html="examItemData.resolu">
                    </div>
                  </div>
                </div> 
              </div>
          `,
    props: ['where', 'examItemData', 'index'],
    data() {
      return {
        subjectType: 'multipleChoiceQuestion',
        // 控制题干的展开
        isShowDry: false,
        radio: '',
        answer: '',
        // 控制单选按钮是否可用
        radioDisabled: false,
        // 控制解析答案的显示
        isShowAnswerAnalysis: false,
        // 用来决定 点击答案过后的样式
        answeredStyle: {},
        // 用来判断是考试还是练习还是背题模式 0为考试模式 1为练习模式 2为背题模式
        // 每次进来之前需要判断模式 可以通过模式切换按钮切换
        doTestModule: 0,
        // 用来判断在练习模式下选择答案后能否再次点击答案
        canClickChoose: true
      }
    },
    computed: {},
    methods: {
      // 背题模式 type为1时是打开背题模式 为2时是关闭背题模式 为3时是交卷后答题卡触发的
      reciteModel(type) {
        if (type == 1) {
          // 设为背题模式 显示出答案
          this.canClickChoose = true
          this.choose(this.answer, true)
          // 使答案不可在选择
          this.radioDisabled = true
        }
        // 取消背题模式
        if (type == 2) {
          // 当本题没有选择答案的时候 去除背题模式的答案及解析
          if (this.radio == '') {
            // 去除样式
            this.answeredStyle = {}
            // 关闭解析
            this.isShowAnswerAnalysis = false
            // 使答案可以再次选择
            this.radioDisabled = false
            // 使答案可以再次选择
            this.canClickChoose = true
          }
        }
        if (type == 3) {
          // 设为背题模式 显示出答案
          this.canClickChoose = true
          if (this.radio !== '') {
            this.choose(this.radio)
          }
          if (this.radio === '') {
            this.choose('')
          }
          // 使答案不可在选择
          this.radioDisabled = true
        }
      },
      // 在考试时切换为练习模式
      exerciseModel() {
        if (this.radio !== '') {
          this.answeredStyle = {}
          this.canClickChoose = true
          // TODO: 本来包含在定时器中
          this.choose(this.radio)
        }
      },
      choose(key, isfromRecit) {
        if (Number(this.where) === 1) {
          // 考试模式
          this.answeredStyle = {}
          this.answeredStyle[key] = 'examination-answer'
          // 将选择答案后将信息返回给答题卡
          const answerObj = {
            index: this.index,
            answerStatu: 'noJudge',
            selectResult: key
          }
          this.$emit('answerToSheet', answerObj)
        }
        if (this.where !== 1) {
          // 练习模式
          // 点击一次答案后就不能在点击了
          if (this.canClickChoose == false) {
            return
          }
          if (key === this.answer) {
            this.answeredStyle[key] = 'right-answer'

            // 如果是背题模式切换按钮触发的 则不改变答题卡的样式
            if (!isfromRecit) {
              const rightObj = {
                index: this.index,
                answerStatu: 'right'
              }
              // 将选择答案且正确后的对将信息返回给答题卡
              this.$emit('answerToSheet', rightObj)
            }
          } else {
            this.answeredStyle[key] = 'wrong-answer'
            this.answeredStyle[this.answer] = 'right-answer'
            const obj1 = {
              answer: this.answer,
              selectAnswer: this.radio,
              pointrules: this.examItemData.pointrules
            }
            // 提交去验证
            const obj2 = window.radioCheck(obj1)
            obj2.index = this.index
            // 将选择答案且错误后的对将信息返回给答题卡
            this.$emit('answerToSheet', obj2)
          }
          // 展示解析
          this.isShowAnswerAnalysis = true
          // 控制不可再次点击
          this.canClickChoose = false
          // 让单选不可用
          this.radioDisabled = true
        }
      },
      // 展开题干按钮事件
      showDry() {
        this.isShowDry = !this.isShowDry
      },
      // 清除答题记录
      clearHistory() {
        this.radio = ''
        this.answeredStyle = {}
        this.radioDisabled = false
        this.isShowAnswerAnalysis = false
        this.canClickChoose = true
      }
    },
    created() {
      this.answer = this.examItemData.answer[0]
    },
    mounted() {}
  }
})(window)
